<template>
    <div class="table">
        <el-table
            :data="tableData"
            style="width: 100%"
            border=""
             @selection-change="handleSelectionChange"
        >
            <el-table-column
                v-if="ifSelection"
                type="selection"
                width="55"
            >

            </el-table-column>

            <el-table-column
                v-if="isShowSelection"
                type="selection"
                width="55">
            </el-table-column>

            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" style="width: 100%" inline >
                        <el-form-item label="提问者头像：">
                            <img class="pre-image" style="width:40px;height:40px" :src="props.row.askerInfo.userAvatar" alt="">
                        </el-form-item>

                        <br>

                        <el-form-item label="提问者昵称：" >
                            <span style="color: #333">{{ props.row.askerInfo.userName }}</span>
                        </el-form-item>

                        <br>

                        <el-form-item label="问题内容：">
                            <div style="magin:0;padding:0;color:#333">{{ props.row.questionContent }}</div>
                        </el-form-item>

                        <br>

                        <el-form-item 
                        label="问题相关图片：" 
                        v-for="(item, index) in props.row.questionImage"
                        :key="index"
                        >
                            <img class="pre-image" style="width:40px;height:40px;margin-right: 20px" :src="item" alt="">
                        
                        </el-form-item>

                        <br>

                        <el-form-item label="查看提问者：">
                            <el-button type="text" @click="lookAskerInfo">查看提问者信息</el-button>
                        </el-form-item>


                        <el-form-item label="相关回答：">
                            <el-button type="text" @click="lookAllAnswer">查看所有答案</el-button>
                        </el-form-item>
           
                        <el-form-item label="被提问的专家：">
                            <el-button type="text" @click="lookExpertInfo">查看专家信息</el-button>
                        </el-form-item>
                    </el-form>

                </template>
            </el-table-column>

            <el-table-column
                type="index"
            ></el-table-column>

            <el-table-column
                prop="kindName"
                label="所属类别"
            ></el-table-column>

            <el-table-column
                label="支付价格"
            >
                <template slot-scope="scope">
                    <span>￥{{ scope.row.payPrice }}</span>
                </template>
            </el-table-column>

            <el-table-column
                prop="whenAsk"
                label="提问时间"
            ></el-table-column>


            <el-table-column
                label="是否匿名"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.isAnonymous ? '是' : '否' }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="是否已解决"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.isSolved ? '是' : '否' }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="是否显示在首页"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.isShowPage ? '是' : '否' }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="是否已关闭"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.isClose ? '是' : '否' }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="是否公开"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.isPublic ? '是' : '否' }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="是否向专家提问"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.isAskExpert ? '是' : '否' }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="操作"
            >
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="showDialog(scope.$index)">查看</el-button>
                    <el-button type="text" size="mini" @click="delQuestion(scope.$index)">删除</el-button>
                </template>
            </el-table-column>


        </el-table>

    </div>
</template>

<script>
export default {
    name: 'Table',
    props: {
        tableData: Array
    },
    data () {
        return {
            ifSelection: false,
            isShowSelection: false
        }
    },
    beforeUpdate () {
        //处理下数据格式
        //whenAsk
        var tableData = this.tableData;
        tableData.forEach((v, index) => {
            tableData[index].whenAsk = v.whenAsk.slice(0, v.whenAsk.indexOf(' '));
        });
    },
    methods: {
        lookAskerInfo () {

        },
        lookExpertInfo () {
            
        },
        lookAllAnswer () {
            
        },
        delQuestion (index) {
            this.$emit('delQuestion', index);
        },
        showSelection () {
            this.ifSelection = !this.ifSelection;
        },
        handleSelectionChange (e) {
            console.log('选中', e)
        },
        showDialog (index) {
            this.$emit('showDialog', index);
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~styles/common.styl'
    .table
        width 100%
        
    
        
        
</style>

